/* components */
import { Pagination } from 'element-ui';
/* const */
import { defaultTableData } from "@src/util/table";
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum';
/* hooks */
import { useSettingListPage, useSettingListTable } from '@src/modules/setting/gpt/hooks';
/* vue */
import { defineComponent } from "vue";
/* scss */
import '@src/modules/setting/gpt/components/pagination.scss';
/* util */
import { isEmpty, isNotNumber } from '@src/util/type';

export default defineComponent({
  name: ComponentNameEnum.SettingTablePagination,
  components: {
    Pagination
  },
  props: {
    pageNum: {
      type: Number
    },
    pageSize: {
      type: Number
    },
    total: {
      type: Number
    },
    selectedNum: {
      type: Number
    },
    onChangePageSize: {
      type: Function
    },
    onChangePageNum: {
      type: Function
    },
    onChangeSelection: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
    const { clearMultipleSelection } = useSettingListTable(emit)
    const { handlerPageNumChange, handlerPageSizeChange } = useSettingListPage(emit)
    
    return {
      handlerPageNumChange,
      handlerPageSizeChange,
      clearMultipleSelection
    }
    
  },
  computed: {
    /** 
     * @description 页码
    */
    _pageNum(): number {
      return this.pageNum ||  1;
    },
    /** 
     * @description 页大小
    */
    _pageSize(): number {
      return this.pageSize || defaultTableData?.defaultPageSizes?.[0] || 10;
    },
    /** 
     * @description 总数
    */
    _total(): number {
      return Number(this.total || 0)
    },
    /** 
     * @description 布局
    */
    layout(): string {
      return 'prev, pager, next, sizes, jumper'
    }
  },
  methods: {
    renderSelectedContent() {
      
      const selectedNum = Number(this.selectedNum)
      
      // 已选择数量为 0 时，不渲染
      if (isNotNumber(selectedNum) || selectedNum <= 0) {
        return
      }
      
      return (
        <span class="base-list-table-pagination-selected">
          ，已选择 { selectedNum } 条
          
          <span 
            class="link-text"
            onClick={this.clearMultipleSelection}
          >
            &nbsp;清空
          </span>
          
        </span>
      )
    }
  },
  render() {
    return (
      <div class="base-setting-list-table-pagination">
        
        <div class="base-setting-list-table-pagination-left">
          
          <span>共 { this._total } 条记录</span>
          
          { this.renderSelectedContent() }
          
        </div>
        
        <Pagination
          background
          pageSizes={defaultTableData.defaultPageSizes}
          layout={this.layout}
          currentPage={this.pageNum}
          pageSize={this.pageSize}
          total={this.total}
          onCurrent-change={this.handlerPageNumChange}
          onSize-change={this.handlerPageSizeChange}
          >
        </Pagination>
        
      </div>
    )
  }
});